import React, { Component } from "react";
import { Form, Icon, Input, Button } from "antd";
import axios from "axios";
class NormalLoginForm extends React.Component {
  // 提交方法
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      // 前端校验成功后提交接口
      if (!err) {
        axios.post("http://localhost/8080/login", values).then(res => {
          // 这里做一个简单的校验
          console.log(res);
          if (res.data.code === 1) {
            // 将全局的存
            window.sessionStorage.setItem("user", 1);
            this.props.history.replace("/vip");
          } else {
            alert(res.data.msg);
          }
        });
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <Form.Item>
          {getFieldDecorator("username", {
            rules: [{ required: true, message: "请输入用户名!" }]
          })(
            <Input
              prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />}
              placeholder="Username"
            />
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator("password", {
            rules: [{ required: true, message: "请输入密码!" }]
          })(
            <Input
              prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
              type="password"
              placeholder="Password"
            />
          )}
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
          >
            登录
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

const WrappedNormalLoginForm = Form.create({ name: "normal_login" })(
  NormalLoginForm
);
export default WrappedNormalLoginForm;
